<template>
	<view class="newsdetails">
		<view class="yonghu">
			<view class="img"><img :src=result.icon alt="" /></view>
			<view>
				<p>{{ result.nickName }}</p>
				<p>10-23</p>
			</view>
		</view>
		<p class="shopName">{{ result.shopName }}</p>
		<view class="details">
			<p class="title">{{ result.title }}</p>
			<img :src=result.images alt="" />
			<p class="content">{{ content }}</p>
		</view>
		<view class="advertise">
			<img src="/static/imgtest/黑.png" alt="" />
		</view>
		<view class="pingluns">
			<view class="pinglun" v-for="item in pingluns" :key="item.id">
				<view class="pinglunp">
					<view class="img"><img :src=result.icon alt="" /></view>
					<p class="pinglunpname">{{ item.userNick }}</p>
				</view>
				<view class="pinglunmes">
					<p>{{ item.content }}</p>
					<p class="pinglunptime">{{ item.createTime }}</p>
					<view class="pinglunmeschild">
						<p v-for="itemchild in item.child" :key="itemchild.id"><span
								class="pinglunmeschildname">{{ itemchild.userNick }}</span>：{{ itemchild.content }}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="bottom">
		<input class="text" type="text" focus placeholder="写个评论" adjust-position v-model="pingluncontent" />
		<input class="button" type="button" value="发表" @click="Comment()" />
		<p class="comments">{{ result.comments }}</p>
		<p class="liked">👍{{ result.liked }}</p>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	var id
	const result = ref([])
	const content = ref([])
	const pingluns = ref([])
	const pingluncontent = ref('')

	function Comment() {
		console.log(pingluncontent)
		uni.request({
			url: `http://localhost:8081/blog/sendComment`,
			// ?userId=1&blogId=4&parentId=3&answerId=4&content=${pingluncontent}

			method: 'POST',
			success: function(res) {
				console.log(res)
			}
		})
	}

	const onLoad = (options) => {
		id = options.id;
		// console.log(id)// 获取传递的 id 参数
		uni.request({
			url: `http://localhost:8081/blog/getDetailBlog/${id}`,
			method: 'GET',
			success: function(res) {
				console.log(res)
				result.value = res.data.data
				content.value = res.data.data.content.replace(/<br\/?>/g, '\n');
				console.log(result);
			}
		})
		uni.request({
			url: `http://localhost:8081/blog/getBlogComment?blogId=${id}&pageNum&pageSize`,
			method: 'GET',
			success: function(res) {
				console.log(res)
				pingluns.value = res.data.data
				console.log(pingluns);
			}
		})
	};
	// 在组件挂载时调用 onLoad
	onMounted(() => {
		const pages = getCurrentPages(); // 获取当前页面栈
		const currentPage = pages[pages.length - 1]; // 获取当前页面
		onLoad(currentPage.options); // 调用 onLoad
	});
</script>

<style scoped lang="scss">
	.newsdetails {
		padding: 0.5rem;
	}

	.yonghu {
		height: 4rem;
		width: 100%;
		display: flex;

		.img {
			width: 3.2rem;
			height: 3.2rem;
			margin: 0.3rem;
			overflow: hidden;
			border-radius: 50%;

			img {
				width: 100%;
			}
		}

		p {
			margin-top: 0.4rem;
			margin-left: 1rem;
		}
	}

	.shopName {
		font-size: 0.25rem;
		color: gray;
		text-align: right;
	}

	.details {

		.title {
			padding: 0.5rem 0;
			font-size: 1.2rem
		}

		img {
			width: 100%;
			border-radius: 1rem;
		}

		.content {
			line-height: 1.2rem;
			padding: 0 0.5rem;
			// font-size: 0.75rem;
			white-space: pre-line;
			/* 保持换行 */
		}
	}

	.advertise {
		padding: 1rem 0;

		img {
			width: 100%;
			border-radius: 1rem;
		}
	}

	.pingluns {
		margin-bottom: 4rem;

		.pinglun {

			.pinglunp {
				display: flex;

				.img {
					width: 3.2rem;
					height: 3.2rem;
					margin: 0.3rem;
					overflow: hidden;
					border-radius: 50%;

					img {
						width: 100%;
					}
				}

				.pinglunpname {
					line-height: 3.8rem;
				}
			}

			.pinglunmes {
				margin-left: 3.8rem;
				padding: 0.5rem 0.5rem 0.5rem 0;
				border-bottom: 0.1rem solid lightgray;

				.pinglunptime {
					line-height: 2rem;
					font-size: 0.5rem;
					color: gray;
				}

				.pinglunmeschild {
					margin: 0.5rem 0;
					background-color: rgb(250, 250, 255);
					border-radius: 0.5rem;

					p {
						padding: 0.25rem;

						.pinglunmeschildname {
							color: gray;
						}
					}
				}
			}

		}

	}

	.bottom {
		width: 100%;
		height: 3rem;
		border-top: 0.1rem solid lightgray;
		display: flex;
		background-color: white;
		position: fixed;
		bottom: 0;
		justify-content: space-between;
		align-items: center;

		input {
			height: 1.5rem;
		}

		.text {
			background-color: lightgray;
			padding: 0 0.5rem;
			margin: 0 1rem;
			border-radius: 0.75rem 0.75rem;
		}

		.button {
			background-color: lightgray;
			padding: 0 0.5rem;
			border-radius: 0.75rem 0.75rem;
		}
	}
</style>